<link rel="stylesheet" href="/css/element.css">
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/formDataUtils.js"></script>
<script src="/js/jquery.min.js"></script>
<style>
    #tools .el-card__body {
        padding: 5px 5px 5px 20px;
    }
    .el-link {
        margin-right:8px;
    }
    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }
    #template {
        height:100%;
    }
    #search .el-card__body {
        height:40px;
    }
    #table {
        height:calc(100% - 120px);
    }
    /*翻页样式*/
    .el-pagination {
        margin-top:5px;
    }
</style>
<div id="template">
    <!-- 查询框-->
    <el-card class="box-card" id="search">
        <el-form :inline="true" :model="searchModel" class="demo-form-inline">
                      <el-form-item label="主题">
                <el-input clearable style="width:200px;" v-model="searchModel.subject"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input clearable style="width:200px;" v-model="searchModel.nick"></el-input>
            </el-form-item>
            <el-form-item label="标题">
                <el-input clearable style="width:200px;" v-model="searchModel.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input clearable style="width:200px;" v-model="searchModel.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" size="large" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!--工具栏-->
    <el-card id="tools">        
        <el-button-group>
            <el-button type="primary" plain icon="el-icon-document" @click="add">新建</el-button>
            <el-button type="danger" plain icon="el-icon-delete" @click="deleteRows">删除</el-button>
        </el-button-group>
    </el-card>

    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :select-on-indeterminate="false">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    prop="subject"
                    align="center"
                    label="主题"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="nick"
                    align="center"
                    label="昵称"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="name"
                    align="center"
                    label="标题"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="age"
                    align="center"
                    label="年龄"
                    show-overflow-tooltip>
            </el-table-column>
            <!-- 操作-->
            <el-table-column label="操作" align="center" width="320">
                <template slot-scope="scope">                    
                    <el-link icon="el-icon-edit-outline" @click="update(scope.row)" type="success">编辑</el-link>                    
                    <el-popconfirm title="确定要删除该场景吗？" @confirm="rowDelete(scope.$index, scope.row)">
                        <el-link slot="reference" icon="el-icon-delete" type="danger">删除</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :prev-click='prevOnePage'
                :next-click="nextOnePage"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-card>
</div>
<script>
    Vue.config.productionTip = false;//屏蔽提示信息
    //当前编辑的场景数据
    var sceneData = {};
    //场景id
    var sceneId;
    var tem = new Vue({
        el: "#template",
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                sceneName:"",
                currentPage: 1,
                pageSize: 10,
                //编辑场景-编辑指令-数据
                editOrderData: {},
                total:0,
                searchModel:{
                    subject:'',
                    nick:'',
                    name:'',
                    age:'',
                    page:1,
                    size:10
                },
                updateData:{}
            }
        },
        filters: {
            
        },
        mounted() {
           this.search();
        },
        methods: {            
            //批量删除
            deleteRows() {
                 const that = this;
                 if (this.multipleSelection.length >= 1) {
                     layer.confirm('确定要删除吗？', {icon: 3, title: '警告'}, function (index) {
                         //重组 参数：id（数组）
                         let list = that.multipleSelection;
                         let result = [];
                         for (let i = 0; i < list.length; i++) {
                             result.push(list[i].id);
                         }
                         let param = new FormData();
                         param.append('ids', result);
                         axios.post('/test2/delete', param).then(res => {
                             if (res.data.success) {
                                 that.$message.success("删除成功！");
                                 //刷新表格数据
                                 that.search();
                             } else {
                                 that.$message.error(res.data.message);
                             }
                         }).catch(err => {
                             console.log(err);
                         });
                         //关闭提醒框
                         layer.close(index);
                     });
                 } else {
                     layer.alert("请勾选记录后再点击删除！");
                 }
             },
            //下一页
            nextOnePage(val) {
                this.currentPage = val;
                //刷新表格数据
                this.search();
            },
            //上一页
            prevOnePage(val) {
                this.currentPage = val;
                //刷新表格数据
                this.search();
            },
            //翻页change事件
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //查询所有场景
            search() {
                let param = {};
                if( this.searchModel.subject){
                    param.subject = this.searchModel.subject
                }
                if( this.searchModel.nick){
                    param.nick = this.searchModel.nick
                }
                if( this.searchModel.name){
                    param.name = this.searchModel.name
                }
                if( this.searchModel.age){
                    param.age = this.searchModel.age
                }
                param.page = this.currentPage;                
                console.log(param);
                axios.get('/test2/query', {
                    params: param
                    }).then(res => {
                    //给表格赋值
                    this.tableData = res.data.data.content;
                    this.total = res.data.data.totalElements;
                }).catch(err => {
                    console.log(err);
                })
            },
            //添加场景操作
            add() {
                //打开弹窗
                layer.open({
                    type: 2,
                    title: '新建',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['400px', '400px'],
                    content: '/dialog/test2/addDialog.html',
                    end: () => {
                        this.search();
                    }
                });
            },            
            //逐行删除
            rowDelete(index, row) {
                let param = new FormData();
                let array = [row.id];
                param.append('ids', array);
                axios.post('/test2/delete', param).then(res => {
                    if (res.data.success) {
                        this.$message.success("删除成功！");
                    } else {
                        this.$message.error(res.data.message);
                    }
                    //刷新表格数据
                    this.search();
                }).catch(err => {
                    console.log(err);
                })
            },
            //修改场景名称与描述
            update(row) {
                //场景id赋值
                this.editOrderData = row;                
                //打开弹窗
                layer.open({
                    type: 2,
                    title: '修改',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['400px', '400px'],
                    content: '/dialog/test2/addDialog.html',
                    end: () => {
                        this.search();
                        this.editOrderData = {};
                    }
                });
            },
            getUpdateData(){
                return this.editOrderData;
            }            
        }
    })
</script>